import React, { Component, PureComponent } from 'react'
import { Link } from 'react-router-dom'
import Styles from './index.less'
function expendMultilevelMenu() {
  const { navList } = this.props;
  return navList.map((item) => (
    <li className={Styles.navOne} key={item.name}>
      <Link to={item.path} className={Styles.navLink}>{item.name}</Link>
      {
        item.children ? 
        (<ul className={Styles.secLevMenu}>
          {
            item.children.map((item) => (
              <li className={Styles.secLevMenuOne} key={item.name}>
                <Link to={item.path} className={Styles.secLevMenuLink}>{item.name}</Link>
                {
                  item.children ? 
                  (<ul className={Styles.thirdLevMenu}>
                      {
                        item.children.map((item) => (
                          <li className={Styles.thirdLevMenuOne} key={item.name}>
                            <Link to={item.path} className={Styles.thirdLevMenuLink}>{item.name}</Link>
                          </li>
                        ))
                      }
                    </ul>) : null
                }
              </li>
            ))
          }
        </ul>) : null
      }
    </li>
  ))
}
const noHoverPage = ['/login', '/register']
class NavAll extends PureComponent {
  constructor() {
    super()
  }
  render() {
    return (
      <ul className={Styles.navAll}>
          {
            expendMultilevelMenu.call(this)
          }
      </ul>
    )
  }
}
export class Search extends Component {
  constructor() {
    super()
    this.state = {
      search: ''
    }
    this.onChange = this.onChange.bind(this)
    this.onClick = this.onClick.bind(this)
  }
  onChange(e) {
    let search = e.target.value
    this.setState({
      search
    })
  }
  onClick() {
    console.log(this.state.search)
  }
  render() {
    return (
      <div className={Styles.search}>
        <input className={Styles.searchInput} type="text" onChange={this.onChange} placeholder="搜索"/>
        <i className={Styles.searchBtn} onClick={this.onClick}>+</i>
      </div>
    )
  }
}
export default class navHeader extends Component {
  constructor() {
    super()
    this.state = {
      noHover: false
    }
    this.routerChange = () => {
      const pathname = location.pathname
      const { noHover } = this.state
      const noHoverPage = ['/login', '/register']
      if (noHoverPage.includes(pathname) !== noHover) {
        this.setState({
          noHover: !noHover
        })
      }
    }
  }
  componentDidMount() {
    this.routerChange()
    window.addEventListener('pushstate', this.routerChange )
    window.addEventListener('popstate', this.routerChange )  
    window.addEventListener('replacestate', this.routerChange )
  }
  componentwillunmount() {
    window.removeEventListener('pushstate', this.routerChange )
    window.removeEventListener('popstate', this.routerChange )  
    window.removeEventListener('replacestate', this.routerChange )
  }
  render() {
    const { navList } = this.props;
    const { noHover } = this.state;
    const logoUrl = 'https://img.alicdn.com/tfs/TB1IKiGF_tYBeNjy1XdXXXXyVXa-110-118.png'
    return (
      <header className={ noHover ? Styles.noHover : ''}>
        <div className={Styles.navContainer}>
          <div className={Styles.navList}>
            <img src={ logoUrl }/>
            <NavAll navList = {navList}/>
            <div className={Styles.funcModule}>
              <Search/>
              <Link className={Styles.toLogin} to="/login">登录</Link>
            </div>
          </div>
        </div>
      </header>
    )
  }
}